<template>
    <dv-border-box8 :reverse="true" class="left-top-chart-container">
        <div class="left-chart-2">
            <div class="lc2-header">
                任务清单
            </div>
            <!-- <dv-decoration-2 style="height:10px;" /> -->
            <div>
                <dv-scroll-board :config="config" @mouseover="mouseoverHandler" @click="clickHandler" style="height:230px;"/>
            </div>
            
        </div>
    </dv-border-box8>
</template>

<script setup name="Grouth">
import { listPlanter } from "@/api/base/planter";

const { proxy } = getCurrentInstance();
const { product_area } = proxy.useDict('product_area');


const planterList = ref([])

const config = reactive({
    header: ['任务名称', '责任人', '最迟完成时间', '关联地块'],
    data: [
        ['行1列1', '行1列2', '行1列3', '行1列4'],
        ['行2列1', '行2列2', '行2列3', '行2列4'],
        ['行3列1', '行3列2', '行3列3', '行3列4'],
        ['行4列1', '行4列2', '行4列3', '行4列4'],
        ['行5列1', '行5列2', '行5列3', '行1列4'],
        ['行6列1', '行6列2', '行6列3', '行1列4'],
        ['行7列1', '行7列2', '行7列3', '行1列4'],
        ['行8列1', '行8列2', '行8列3', '行1列4'],
        ['行9列1', '行9列2', '行9列3', '行1列4'],
        ['行10列1', '行10列2', '行10列3', '行10列4'],
    ],
    index: true,
    columnWidth: [60],
    align: ['center'],
})

const mouseoverHandler = (e) => {
    console.log(e)
}

const clickHandler = (e) => {
    console.log(e)
}

const data = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 500,
        asId: null,
        productId: null,
        year: null,
    },
    rules: {
        productAreaId: [
            { required: true, message: "产区不能为空", trigger: "blur" }
        ],
        planterId: [
            { required: true, message: "种植主体不能为空", trigger: "blur" }
        ]
    }
});
const { queryParams, rules } = toRefs(data);

</script>

<style lang="scss" scoped>
.left-chart-2 {
    width: 100%;
    height: 100%;
    // height: 280px;
    // display: flex;
    // flex-direction: column;
    padding: 20px;

    .lc2-header {
        height: 20px;
        line-height: 20px;
        font-size: 18px;
        font-weight: bold;
        text-indent: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    // .lc2-details {
    //     height: 40px;
    //     font-size: 14px;
    //     display: flex;
    //     align-items: center;
    //     text-indent: 20px;

    //     span {
    //         color: #096dd9;
    //         font-weight: bold;
    //         font-size: 16px;
    //         margin-left: 20px;
    //     }
    // }

    // .lc2-chart {
    //     // height: calc(~"100% - 80px");
        
    // }
}
</style>
